<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 48 48"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><rect data-follow-fill="currentColor" width="48" height="48" rx="24" :fill="_fill"/><path d="M24 19c-2.256 0-4.09 1.87-4.09 4.167 0 2.297 1.834 4.166 4.09 4.166s4.09-1.869 4.09-4.166C28.09 20.869 26.257 19 24 19Zm2.173 1.666c.1.09.194.186.282.287l-.477.485-.136-.148-.146-.138.477-.486Zm-1.085-.65c.126.045.25.097.367.157l-.263.634-.213-.1-.153-.058.262-.633Zm-1.287-.183h.398v.687L24 20.512l-.199.008v-.687Zm-.87.175.258.634-.17.064-.197.091-.257-.634c.118-.059.241-.11.366-.155Zm-1.87 1.676.622.267-.098.216-.057.157-.621-.267c.044-.129.095-.253.154-.373Zm-.334 1.278h.674l-.007.203.008.203h-.675v-.405Zm.324 1.665a3.594 3.594 0 0 1-.153-.375l.625-.263.062.174.089.2-.623.264Zm.72 1.095-.282-.286.532-.544.136.149.146.138-.533.543Zm.386-4.432-.135.148-.476-.485c.087-.101.182-.197.28-.287l.478.486-.146.138Zm.755 5.027a3.132 3.132 0 0 1-.367-.157l.263-.633.213.1.153.058-.262.633Zm1.287.183H23.8v-.688l.199.008.199-.008v.688Zm.869-.175-.257-.636.17-.063.197-.092.257.635a3.14 3.14 0 0 1-.367.156ZM24 24.833c-.904 0-1.636-.745-1.636-1.666 0-.34.099-.654.269-.917l.592.603.427-.435-.598-.61c.267-.194.593-.308.946-.308.904 0 1.636.747 1.636 1.667s-.732 1.666-1.636 1.666Zm2.173.831-.477-.486.146-.138.136-.148.476.486a3.174 3.174 0 0 1-.28.286Zm.766-1.017-.622-.268.098-.216.057-.157.621.267a3.294 3.294 0 0 1-.154.374Zm.334-1.28h-.674l.007-.202-.008-.203h.675v.405Zm-.172-1.29-.624.263-.063-.173-.089-.202.624-.262c.057.121.108.247.152.375Zm.172 10.256h4.09V34h-4.09v-1.667Zm-10.637 0h4.091V34h-4.09v-1.667ZM15 14v17.5h18V14H15Zm9 14.167c-2.713 0-4.91-2.237-4.91-5 0-2.765 2.197-5 4.91-5s4.91 2.236 4.91 5c0 2.763-2.197 5-4.91 5Z" fill="#fff"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconmonstrSafe_21A43pejfp extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
